<script>
import { api } from '@/api';
import CopyTag from '@/components/CopyTag.vue';
import SignInModal from '@/components/SignInModal.vue';
import { personalMenuList } from '@/router/personal';
import { useAppStore } from '@/stores/app';
import { mapStores } from 'pinia'
import { Cell, Icon, Toast, Uploader } from 'vant';

export default {
  components: {
    Cell,
    SignInModal,
    Icon,
    Uploader,
    CopyTag
  },
  computed: {
    ...mapStores(useAppStore),
    personalMenuList: () => personalMenuList
  },
  data() {
    return {
    }
  },
  methods: {
    async afterRead({ file }) {
      const { url } = await api.upload(file)
      const { success, msg } = await api.account.changeAvatar({ avatarUrl: url })
      if (success) {
        this.appStore.setUserInfo({
          ...this.appStore.userInfo,
          avatar: url
        })
        Toast.success({ message: '修改成功' })
      } else {
        Toast.fail({ message: msg ?? '修改失败' })
      }
    },
  },
}
</script>

<template>
  <div class="personal-view">
    <div class="personal-header">
      <div class="personal-header-button">
        <Icon name="bullhorn-o" size="26" color="white" @click="$router.push({ path: '/notice' })" />
        <!-- <img
          class="header-icon"
          style="visibility: hidden;"
          src="../../assets/icons/settings.png" alt=""
        > -->
        <div class="header-signin" @click="$refs.signInModal.open()">
          <img class="header-icon" src="../../assets/icons/sign-in.png" alt="">
          <span>签到</span>
        </div>
        <SignInModal ref="signInModal" />
      </div>

      <div class="personal-info">
        <Uploader :after-read="afterRead">
          <img class="personal-avatar" :src="appStore.userInfo.avatar">
        </Uploader>

        <div class="personal-username">
          <span>{{ appStore.userInfo.nickname }}</span>
          <CopyTag prefix="UID" :text="String(appStore.userInfo.uid)" />
        </div>
      </div>
    </div>

    <div class="personal-list">
      <Cell v-for="item in personalMenuList" :key="item.path" :title="item.name"
        v-bind="item.isRoute ? { to: item.path } : { url: item.url }" @click="item.onClick" is-link>
        <template #title>
          <div class="menu-item">
            <img :src="item.icon" alt="">
            <span>{{ item.name }}</span>
          </div>
        </template>
      </Cell>
    </div>
  </div>
</template>

<style lang="less" scoped>
.personal-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .personal-header {
    height: 260px;
    padding: 20px;
    padding-top: 0;
    box-sizing: border-box;
    background-size: cover;
    background-image: url('../../assets/images/bj-3.png');
    background-repeat: no-repeat;

    padding-top: ~"calc(var(--status-bar-height))";

    .header-icon {
      width: 20px;
      height: 20px;
    }

    .personal-header-button {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-signin {
        display: flex;
        align-items: center;
        gap: 5px;
        color: white;
        background-color: #eb9c32;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 14px;
        box-sizing: border-box;
      }
    }

    .personal-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .personal-avatar {
        width: 80px;
        height: 80px;
        border-radius: 999px;
        overflow: hidden;
        object-fit: cover;
        border: 6px solid #c7eedd;
      }

      .personal-username {
        color: white;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .personal-list {
    flex: 1;
    background-color: #f3f4f8;

    .menu-item {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 17px;

      >img {
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>
